<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
</head>
<body>
    <ul>
        <li>111</li>
        <li class="box">222</li>
        <li class="box">333</li>
        <li>444</li>
    </ul>
    <script>
        // 1.jq里的循环 
        // 支持隐式迭代 
        // $("li").click(function(){
        //     console.log("hello");
        // })

        // console.log($("li"));
        // $("li").each(function(index,item){
        //     // console.log(item);
        //     // console.log( $(item));
        //     $(item).click(function(){
        //         console.log("hello");
        //     })
        // })

        // 2.获取元素在同级元素中的索引值 ； index();
        // 方式一 ：返还 元素在同级元素中的索引值 
    //    var key =  $("li:eq(2)").index();
    //    console.log(key);

        // 方式二： 查找某个元素在同级元素中的索引值 
    //    var key =  $("li").index($(".box"));
    //    console.log(key);



    // 3.筛选第一个元素  first
        // $("li").first().css("background","red");


    // 4.筛选最后一个元素 last
    // $("li").last().css("background","red");

    // 5.选择具体某一个索引值 
    // $("li").eq(2).css("background","red");

    // 6.选择上一个选择的元素  end();回退到上一个选择的jq元素 
    // $("li").eq(2)
    // $("li").eq(2).eq(0).end().end().css("background","red");

// 6.选择上一个选择的元素  end();回退到上一个选择的jq元素 
    // $("li").eq(2)
    // $("li").eq(2).eq(0).end().end().css("background","red");


    // 7.获取 同级的上一个元素 
    // $(".box").prev().css("background","red");

    // 8.获取同级的上一个所有元素 
    // $(".box").prevAll().css("background","red");


    // 9.获取下一个元素；
    // $("li").eq(1).next().css("background","red");

    // 10.获取下一个所有元素 
    // $("li").eq(1).nextAll().css("background","red");

    // 11.获取同级的所有兄弟元素 ；
    // $("li").eq(1).siblings().css("background","red");

    // 12.获取 同级元素中不是某个的元素

    // $("li").not(".box").css("background","red");


    // 13.获取元素在筛选需要的元素  filter 
    // $("li").filter(".box").css("background","red");




    </script>
</body>
</html>